<template>
  <div>
    <a-form
      layout="vertical"
      :model="formState"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="选择年份：">
        <!-- <a-input
          v-model:value="formState.fieldA"
          placeholder="input placeholder"
        /> -->
        <a-date-picker
          mode="year"
          placeholder="请选择年份"
          format="YYYY"
          v-model:value="formState.eventTime"
          :open="yearShowOne"
          @openChange="openChangeOne"
          @panelChange="panelChangeOne"
        />
      </a-form-item>
      <a-form-item label="编写者：" :wrapper-col="{ span: 4 }">
        <a-input
          v-model:value="formState.eventEditor"
          placeholder="请输入编写者名字"
        />
      </a-form-item>
      <a-form-item label="简要内容：">
        <a-textarea
          v-model:value="formState.eventTitle"
          placeholder="请输入简要内容"
          :rows="5"
          showCount
          :maxlength="500"
        />
      </a-form-item>
      <!-- <a-form-item>
        <a-button type="primary" @click="onSubmit">Submit</a-button>
      </a-form-item> -->
    </a-form>
  </div>
</template>

<script>
  import { ref, watchEffect } from 'vue'
  export default {
    props: {
      info: Object,
    },
    setup(props) {
      const formState = ref({
        // eventTime: '2023',
        // eventEditor: '',
        // eventTitle: '',
      })
      watchEffect(() => {
        // console.log(`text is: ` + props.hello)
        formState.value = props.info
      })
      const yearShowOne = ref(false)
      const openChangeOne = (status) => {
        if (status) {
          yearShowOne.value = true
        }
      }
      // 得到年份选择器的值
      const panelChangeOne = (value) => {
        formState.value.eventTime = value
        yearShowOne.value = false
      }

      const onSubmit = () => {
        console.log(formState.value)
      }
      return {
        formState,
        onSubmit,
        labelCol: {
          span: 4,
        },
        wrapperCol: {
          span: 14,
          //   offset: 10,
        },
        yearShowOne,
        panelChangeOne,
        openChangeOne,
      }
    },
  }
</script>
